<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" href="css/main.css" />
	<link rel="stylesheet" href="css/magic.min.css" />
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/gray/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/demo/demo.css">
	<script type="text/javascript" src="jquery-easyui-1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script src="js/main.js"></script>
</head>
<body class="icon-Beijing">
		<div class="container">   
			<div class="box">
				<div class="box-content">
					<div class="box-wrapper">
						God in Creation<span class="name">昆明</span>
						<div class="row">92 likes - 1,410 views</div>					
					</div>
				</div>
				<div class="box-overlay magictime" data-hover="bombRightOut" data-return="">
					<img src="images/Kun.jpg" style="width:260px;height:195px;" alt="" />
				</div>
				<a class="link" href="#" target="_blank"></a>						
			</div>
			
			<div class="box">
				<div class="box-content">
					<div class="box-wrapper">
						Zephaniah 3:17<span class="name">大理</span>
						<div class="row">119 likes - 1,826 views</div>					
					</div>	
				</div>
				<div class="box-overlay magictime" data-hover="bombRightOut" data-return="">
					<img src="images/Dal.jpg" style="width:260px;height:195px;" alt="" />
				</div>
				<a class="link" href="#" target="_blank"></a>	
			</div>
			
			<div class="box">
				<div class="box-content">
					<div class="box-wrapper">
						Rejoice Always<span class="name">丽江</span>
						<div class="row">135 likes - 1,296 views</div>					
					</div>	
				</div>
				<div class="box-overlay magictime" data-hover="bombRightOut" data-return="">
					<img src="images/Li.jpg" style="width:260px;height:195px;"  alt="" />
				</div>
				<a class="link" href="#" target="_blank"></a>	
			</div>	
			
			
			<div class="box">
				<div class="box-content">
					<div class="box-wrapper">
						Colossians 1:16<span class="name">西双版纳</span>
						<div class="row">123 likes - 1,492 views</div>					
					</div>	
				</div>
				<div class="box-overlay magictime" data-hover="bombRightOut" data-return="">
					<img src="images/Bann.jpg" style="width:260px;height:195px;"  alt="" />
				</div>
				<a class="link" href="#" target="_blank"></a>				
			</div>	
			
			<div class="box">
				<div class="box-content">
					<div class="box-wrapper">
						Be A Man!<span class="name">香格里拉</span>
						<div class="row">84 likes - 1,157 views</div>					
					</div>	
				</div>
				<div class="box-overlay magictime" data-hover="bombRightOut" data-return="">
					<img src="images/Xiang.jpg" style="width:260px;height:195px;"  alt="" />
				</div>
				<a class="link" href="#" target="_blank"></a>							
			</div>	
			
			<div class="box">
				<div class="box-content">
					<div class="box-wrapper">
						Philippians 4:13<span class="name">曲靖</span>
						<div class="row">77 likes - 1,017 views</div>					
					</div>	
				</div>
				<div class="box-overlay magictime" data-hover="bombRightOut" data-return="">
					<img src="images/Qu.jpg"  style="width:260px;height:195px;"  alt="" />
				</div>
				<a class="link" href="#" target="_blank"></a>										
			</div>								
										
			
		</div>
	</div>
	<div class="htmleaf-container">
         <div class="Anniu">
		<a href="#" class="easyui-linkbutton" onclick="$('#Denglu').window('open')" style="width:60px;height:40px">登陆</a> |
		<a href="#" class="easyui-linkbutton" onclick="$('#Zhuce').window('open')" style="width:60px;height:40px">注册</a>
	</div>
	<div id="Denglu" class="easyui-window" title="登陆" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:380px;height:250px;padding:10px;padding:30px 20px 10px 40px; text-align:center;">
		<form action="index.html" method="get">
				<p  title="用户代码不许为空，只能输入数字、字母，长度为6-20字符." class="easyui-tooltip">
					用户:<input type="text" name="Account"></p>
				<p title="密码不许为空，只能输入数字、字母，长度为6-18字符." class="easyui-tooltip">
					密码:<input type="password" name="Password"></p>
				<div>   
					<input type="checkbox" name="Interest" value="记住密码">记住密码
					<input type="checkbox" name="Interest" value="记住密码">自动登录
				</div>
				<div style="padding:5px;text-align:center;">
					<input type="submit" class="easyui-linkbutton" style="width:200px;height:30px;" value="登录">
		</div>
		</form>

    <div id="Zhuce" class="easyui-window" title="注册" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:380px;height:350px;padding:10px;padding:30px 20px 10px 40px; text-align:center;">
		<form action="index_a-1.html" method="get">
		   <p  title="账号不许为空，只能输入数字、字母，长度为6-20字符." class="easyui-tooltip" >
                用
                  <b class="icon-help"></b>
                户:<input type="text" name="Account" id="Account" onblur="checkName()">
				<span id="accoutId" ></span></p>

		    <p title="密码不许为空，只能输入数字、字母，长度为6-18字符." class="easyui-tooltip" >
                密
                 <b class="icon-help"></b>
                码:<input type="password" name="Password" id="Password" onblur="checkPassward()" >
				<span id="passwordId" ></span></p>

            <p title="与密码必须一致" class="easyui-tooltip" >
                重复密码:<input type="password" name="Pwd"  id="Pwd" onblur="checkPwd()">
				<span id="pwdId" ></span></p>

            <p  title="真实姓名."class="easyui-tooltip" >
                姓
                 <b class="icon-help"></b>
                名:<input type="text" name="Xingming" id="Xingming" onblur="checkXingming()">
				<span id="xingmingId" ></span></p>

            <p title="身份证不能为空."class="easyui-tooltip">
                身份证号：<input type="text" name="Card" id="Card"  onblur="checkCard()" >
				<span id="cardId" ></span></p>

			<p  title="电话号码不能为空." class="easyui-tooltip">
                电话号码:<input type="text"  name="Phone" id="Phone"  onblur="checkPhone()">
				<span id="phoneId" ></span></p>

           <p  title="邮箱不能为空." class="easyui-tooltip" >
                电子邮箱:<input type="text"  name="Email" id="Email"  onblur="checkEmail()">
				<span id="emailId" ></span></p>
				
		    <div style="padding:5px;text-align:center;">
			<input type="submit" class="easyui-linkbutton"id="Tijiao" style="width:200px;height:30px;" value="注册">
		</div>
	   </form>
    </div>
</div>
</body>

<script type="text/javascript">
 //用户
var user_Boolean = false;
var password_Boolean = false;
var varconfirm_Boolean = false;
var Card_Boolean = false;
var Mobile_Boolean = false;
var emaile_Boolean = false;
$('#Account').blur(function(){
  if ((/^[a-z0-9_-]{4,8}$/).test($("#Account").val())){
    $('#accoutId').html("正确").css("color","green");
    user_Boolean = true;
  }else {
    $('#accoutId').html("错误").css("color","red");
    user_Boolean = false;
  }
});
//密码
$('#Password').blur(function(){
  if ((/^[a-z0-9_-]{6,16}$/).test($("#Password").val())){
    $('#passwordId').html("正确").css("color","green");
    password_Boolean = true;
  }else {
    $('#passwordId').html("错误").css("color","red");
    password_Boolean = false;
  }
});


// 确认密码
$('#Pwd').blur(function(){
  if (($("#Password").val())==($("#Pwd").val())){
    $('#pwdId').html("正确").css("color","green");
    varconfirm_Boolean = true;
  }else {
    $('#pwdId').html("错误").css("color","red");
    varconfirm_Boolean = false;
  }
});
//身份证
$('#Card').blur(function(){
  if ((/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/).test($("#Card").val())){
    $('#cardId').html("正确").css("color","green");
    Mobile_Boolean = true;
  }else {
    $('#cardId').html("错误").css("color","red");
    Mobile_Boolean = false;
  }
});

//手机
$('#Phone').blur(function(){
  if ((/^1[34578]\d{9}$/).test($("#Phone").val())){
    $('#phoneId').html("正确").css("color","green");
    Mobile_Boolean = true;
  }else {
    $('#phoneId').html("错误").css("color","red");
    Mobile_Boolean = false;
  }
});



// 邮箱
$('#Email').blur(function(){
  if ((/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/).test($("#Email").val())){
    $('#emailId').html("正确").css("color","green");
    emaile_Boolean = true;
  }else {
    $('#emailId').html("错误").css("color","red");
    emaile_Boolean = false;
  }
});




//注册
$('#Tijiao').click(function(){
  if(user_Boolean && password_Boolea && varconfirm_Boolean&&Card_Boolean&& Mobile_Boolean && emaile_Boolean == true){
    alert("注册成功");
  }else {
    alert("请完善信息");
  }
});
</script>
</html>